:root {
    /* Fonts */
    --default-font: "Inter", sans-serif;

    /* Layouts */
    --padding: var(--s0);
    --max-inline-size: 60ch;
    --max-layout-size: 85vw;
    --page-gutters: var(--s6);
    --overlay-index: 1000;
    /* Modular Scaling */
    --ratio: 1.5;
    --s-9: calc(var(--s-8) / var(--ratio));
    --s-8: calc(var(--s-7) / var(--ratio));
    --s-7: calc(var(--s-6) / var(--ratio));
    --s-6: calc(var(--s-5) / var(--ratio));
    --s-5: calc(var(--s-4) / var(--ratio));
    --s-4: calc(var(--s-3) / var(--ratio));
    --s-3: calc(var(--s-2) / var(--ratio));
    --s-2: calc(var(--s-1) / var(--ratio));
    --s-1: calc(var(--s0) / var(--ratio));
    --s0: 1rem;
    --s1: calc(var(--s0) * var(--ratio));
    --s2: calc(var(--s1) * var(--ratio));
    --s3: calc(var(--s2) * var(--ratio));
    --s4: calc(var(--s3) * var(--ratio));
    --s5: calc(var(--s4) * var(--ratio));
    --s6: calc(var(--s5) * var(--ratio));
    --s7: calc(var(--s6) * var(--ratio));
    --s8: calc(var(--s7) * var(--ratio));
    --s9: calc(var(--s8) * var(--ratio));

    /* Colors */
    --white: #FFFFFC;
    --off-white: #F8F8F8;
    --grey: #a0a0a0;
    --accent-light: #F5F5F5;
    --accent: #EBE8E3;
    --accent-dark: #D6D1C9;
    --accent-darker: #A5A29B;
    --green: #00A643;
    --red-light: #ff3535;
    --red: #FF0000;
    --red-dark: #D00000;
    --yellow: #FFC300;
    --charcoal-light: #434543;
    --charcoal: #2A2B2A;
    --charcoal-dark: #1E1F1E;

    /* Borders */
    --default-border: 1px solid var(--grey);
    --content-border: 1px solid var(--grey);
    --accent-border: 1px solid var(--accent);
    --btn-border: 1px solid var(--charcoal);

    /* Text */
    --text-default: var(--charcoal);

    /* Misc */
    --default-background: var(--off-white);
    --default-radius: 4px;
}

.container {
    background-color: var(--off-white);
    border: var(--content-border);
    border-radius: var(--default-radius) var(--default-radius) 0 0;
}

.container-round {
    background-color: var(--off-white);
    border: var(--content-border);
    border-radius: var(--default-radius);
}

#page-root {
    background-color: var(--white);
    min-inline-size: 65vw;
    min-block-size: 80vh;
}